<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  // padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  // height: 100vh;
  font-size: 1.2rem;
  box-sizing: border-box;
  // position: relative;
  // flex: 1;
  // overflow: hidden;
  // $radiusSize: 100%;
  // display: flex;
  // flex-direction: column;
  padding: 4rem 1rem 1rem;
  .my_tuan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    z-index: 2;
    // background: -webkit-linear-gradient(top, #fd8701, #fd8701);
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }

  .exothecium_one {
    // width: 100%;
    // height: 7.8rem;
    background-color: white;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    .imgs {
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 15px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .middle {
      width: 80%;
      margin-left: 6px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .middle_one {
        font-size: 15px;
        color: #1b1b1b;
      }
      .middle_two {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .the_price {
          // margin-right: 45px;
          :nth-child(1) {
            font-size: 1.3rem;
            color: var(--theme_color);
          }
          :nth-child(2) {
            font-size: 1.8rem;
            color: var(--theme_color);
            margin-right: 5px;
          }
          :nth-child(3) {
            text-decoration: line-through;
            color: #999;
          }
        }
      }
    }
  }

  .panle {
    background-color: white;
    margin-top: 12px;
    border-radius: 8px;
    padding: 12px;
    .panle_up {
      display: flex;
      justify-content: space-between;
      .person_up {
        color: #1b1b1b;
      }
    }

    .panle_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
      .panle_left {
        display: flex;
        align-items: center;
        .imgs {
          width: 30px;
          height: 30px;
          overflow: hidden;
          border-radius: 15px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .nickname {
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
<template>
  <div class="activityShow">
    <div class="my_tuan" :style="{ backgroundColor: theme_color }">
      <van-icon class="icon" name="arrow-left" @click="iconClick" />
      <span>已参与人数</span>
    </div>

    <div class="exothecium_one">
      <div class="imgs">
        <img :src="activityItem.cover" alt="" />
      </div>
      <div class="middle">
        <div class="middle_one">{{ activityItem.title }}</div>

        <div class="middle_two">
          <div class="the_price" v-if="val.price">
            <span :style="{ color: theme_color }">￥</span>
            <span :style="{ color: theme_color }">{{ val.active_price }}</span>
            <span>￥{{ val.price }}</span>
          </div>
        </div>

        <div class="dwon_left" :style="{ color: theme_color }">
          <span>距结束</span>
          <span>{{ DD }}</span
          >天:<span>{{ HH }}</span
          >时:<span>{{ MM }}</span
          >分:<span>{{ SS }}</span
          >秒
        </div>
      </div>
    </div>

    <div class="panle" v-if="orderList.length > 0">
      <div class="panle_up">
        <div class="person_up">
          <span>已参与人数</span>
          <span :style="{ color: theme_color }">{{ orderList.length }}</span
          ><span v-if="val.group_num">/{{ val.group_num }}</span> <span v-else>人</span>
        </div>
        <div v-if="val.group_num">(满{{ val.group_num }}人活动结束)</div>
      </div>
      <div class="panle_item" v-for="(item, i) in orderList" :key="i">
        <div class="panle_left">
          <div class="imgs"><img :src="item.avatar" alt="" /></div>
          <span class="nickname">{{item.nickname}}</span>
          <span v-if="val.price">￥{{item.price}}</span>
        </div>
        <div class="panle_right">{{item.createtime}}</div>
      </div>
    </div>

    <Nodata v-if="orderList.length == 0"></Nodata>
  </div>
</template>

<script>
import Nodata from '@/components/Nodata'
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Field,
  RadioGroup,
  Radio,
  Image as VanImage,
} from "vant";
export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [VanImage.name]: VanImage,
    Nodata
  },
  data() {
    return {
      openid: "",
      activity_id: null,
      theme_color: "",
      status: "2",
      activityItem: {},
      val: {},
      DD: "00",
      HH: "00",
      MM: "00",
      SS: "00",
      endtime: "",
      orderList: "",
    };
  },
  created() {
    console.log(this.$route.hash);
    this.theme_color = this.$route.hash;
    this.openid = localStorage.getItem("COPENID");
    this.activity_id = this.$route.query.activity_id;
    this.getActivityItem();
    this.getPageOrder();
  },
  computed: {},
  mounted() {
    const _this = this;
    let time = setInterval(() => {
      if (_this.flag == true) {
        clearInterval(time);
      }
      _this.timeDown();
    }, 1000);
  },
  methods: {
    getActivityItem() {
      let params = {
        id: this.activity_id,
      };
      this.$request.getActivityItem(params).then((res) => {
        this.activityItem = res.data;
        this.val = res.data.val;
        this.endtime = res.data.end_time;
        setInterval(() => {
          this.timeDown(this.endtime);
        }, 1000);
      });
    },
    getPageOrder() {
      let params = { activity_id: this.activity_id };
      this.$request.getPrizeHBTKorder(params).then((res) => {
        if(res.ret == 200 && !res.data) return
        this.orderList = res.data;
        console.log(this.orderList, "+++++++++this.orderList++++++++");
      });
    },
    // 点击红包
    myClick() {
      this.nodataShow = false;
      this.getGroupMyGifts();
    },
    // 退回
    iconClick() {
      this.$router.go(-1);
    },
    // 立即倒计时
    timeDown(time) {
      const endTime = new Date(time).getTime();
      const nowTime = new Date(time);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.DD = dd > 9 ? dd : "0" + dd;
        this.HH = hh > 9 ? hh : "0" + hh;
        this.MM = mm > 9 ? mm : "0" + mm;
        this.SS = ss > 9 ? ss : "0" + ss;
      } else {
        this.isfail = true;
      }
    },
  },
};
</script>